*{
    
    box-sizing: border-box;
}
.about{
    width: 100%;
    min-height: 100%;
    background-color: #ddd;
}
.about-section{
    width: 80%;
    display: flex;
    margin: auto;
    padding-top: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.about-content{
    width: 55%;
}
.about-image img{
    width: 80%;
    height: auto;
}
.about-content .about-header{
    /*text-transform: uppercase;*/
    font-size: 28px;
}
.about-content .about-text p{
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.5;
}
.about-content button #readMore-button{
    margin: 30px 0;
}
.about-content button#readMore-button{
    background-color: #3d3d3d;
    border: none;
    padding: 12px 40px;
    text-decoration: none;
    color: #fff;
    font-size: 25px;
    letter-spacing: 1.5px;
}
button#readMore-button:hover{
    background-color: #a52a2a;
    color: #fff;
    cursor: pointer;
}
#readMore-text {
    display: none;
}

.about-social-icons{
    margin-top: 20px;
} 
.about-section .about-social-icons i{
    color: #a52a2a;
    font-size: 30px;
    padding: 10px; 
}
.about-section .about-social-icons i:hover{
    color: #3d3d3d;
}
@media screen and (max-width: 700px) {
    .about-section,
    .missionStatement-section,
    .companyVision-section{
        flex-direction: column;
        flex: 1fr;
        width: 100%;
    }
    .about-header h1,
    .missionStatement-header h1,
    .companyVision-header h1{
        font-size: 35px;
    }
    .about-content,
    .missionStatement-content,
    .companyVision-content{
        width: 80%;
    }
}
@media (max-width: 506px){
    .about-content .readMore-button a{
        padding: 6px 10px;
    }
}

/*MISSION STATEMENT*/
.missionStatement{
    width: 100%;
    min-height: 100%;
    background-color: #000;
    color: #fff;
}
.missionStatement-section{
    width: 80%;
    display: flex;
    margin: auto;
    padding-top: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.missionStatement-content{
    width: 55%;
}

.about-image img{
    width: 80%;
    height: auto;
}
.missionStatement-content .missionStatement-header{
    /*text-transform: uppercase;*/
    font-size: 28px;
}
.missionStatement-content .missionStatement-text p{
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.5;
}
@media only screen and (max-width: 650px) {
    .missionStatement-section{
        width: 80%;
        display: flex;
        margin: auto;
        padding-top: 100px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .missionStatement-content{
        width: 100%;
    }
    
    .about-image img{
        width: 100%;
        height: auto;
    }
}

/*company Vision*/
.companyVision{
    width: 100%;
    min-height: 100%;
    background-color: #ddd;
}
.companyVision-section{
    width: 80%;
    /*display: flex;*/
    margin: auto;
    padding-top: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.companyVision-content{
    width: 100%;
}
.companyVision-header h1{
    font-size: 60px;
    display: block;
    justify-content: start;
    align-items: start;
    text-align: start;
    /*padding-left: 50px;*/
}
.companyVision-text-image{
    display: flex;
    width: 100%;
}
.companyVision-text{
    width: 45%;
    margin-top: 20px;
}
.companyVision-text p{
    font-size: 18px;
    line-height: 1.5;
}

.about-image-cv{
    margin-top: 20px;
    width: 55%;
    margin-bottom: 20px;
    /*min-height: 100px;
    min-width: 200px;*/
    background: url(file:///C:/Users/USER/Desktop/CODING/PrimaGRID-Website/Images/Transition/IMG-20230329-WA0009.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Styles for small screens */
@media only screen and (max-width: 650px) {
    .companyVision-header h1{
        font-size: 55px;
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .companyVision-text-image{
        flex-direction: column;
        /*flex: 1fr;*/
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 100%;
    }
    .companyVision-text{
        width: 100%;
    }
    .about-image-cv{
        width: 80%;
        height: 250px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    
        background-image: url("../Images/Transition/IMG-20230329-WA0009.jpg");
    }
}

/*team*/
.teamVision{
    width: 100%;
    min-height: 100%;
    height: auto;
    background-color: #000;
}
.teamVision-section{
    width: 90%;
    display: block;
    margin: auto;
    padding-top: 50px;
}
.teamVision-content{
    width: 55%;
}

.team-about-image{
    width: 100%;
    height: auto;
}

.team-details{
    display: flex;
    color: white;
}
.team-position{
    padding-left: 8px;
}
.team-position h2{
    margin: 0;
    padding-bottom: 3px;
    color: goldenrod;
    font-size: 18px;
}
.team-position p{
    margin: 0;
    padding-top: 5px;
    font-size: 15px;
}

.team-about-image .team-details img{
    width: 10%;
    height: 150px;
}
.teamVision-content .teamVision-header{
    /*text-transform: uppercase;*/
    display: block;
    font-size: 28px;
    color: #fff;
}
.teamVision-content .teamVision-images{
    width: 20px;
    height: 30px;
}
@media only screen and (max-width: 650px) {
    .teamVision-content{
        width: 100%;
    }
    .teamVision-content .teamVision-header{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .team-about-image .team-details img{
        width: 20%;
        height: auto;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
    }
    .team-details{
        padding-bottom: 30px;
    }
    .team-position{
        padding-left: 0;
    }
}